<template>
  <div class="sectionHead">
    <span class="sectionHeadIcon"></span>
    <span class="sectionHeadContent">{{sectionHeadDesc}}</span>
    <i class="polCheckRadio iconfont" v-if="showCheck" :class="{disabled: checkDisable, checked: checked}" @click="setCheckState"></i>
  </div>
</template>

<script>
export default {
  name: 'sectionHead',
  props: ['sectionHeadDesc', 'showCheck', 'checkDisable', 'checked'],
  data () {
    return {
      checkEnable: this.checked
    }
  },
  methods: {
    setCheckState () {
      if (!this.checkDisable) {
        this.checkEnable = !this.checked
        this.$emit('getChecked', this.checkEnable)
      }
    }
  }
}
</script>

<style scoped>
  .sectionHead {
    width: 100%;
    height: 20px;
    position: relative;
    padding: 8px 0;
  }
  .sectionHeadIcon {
    width: 3px;
    height: 20px;
    background: #0035ff;
    display: block;
    position: absolute;
  }
  .sectionHeadContent {
    padding-left: 15px;
    line-height: 20px;
    font-weight: bold;
    font-size: 16px;
  }
  .polCheckRadio {
    position: absolute;
    display: block;
    right: 15px;
    top: 7px;
    font-size: 20px;
    text-align: center;
    line-height: 20px;
    color: #113dff;
  }
  .polCheckRadio:before {
    content: "\e651";
  }
  .polCheckRadio.checked:before {
    content: "\e629";
  }
  .checked {
    color: #113dff;
  }
  .polCheckRadio.checked.disabled {
    color: #99ceff;
  }
</style>
